<html>
  <head>
    <title>view-positioning-modes</title>
    <style>
    
      div#list { white-space: nowrap; overflow:auto; size:*; border:1px solid;}
    
    </style>
    <script type="text/tiscript">
    
      var cnt = 0;
    
      function showEvent(eventname) {
        var list = $(div#list);
        list.$prepend(<text>{++cnt}. {eventname}</text>);
        if(list.length > 200)
          list.last.remove();
        const states = [ "WINDOW_STATE_NA", "WINDOW_SHOWN", "WINDOW_MINIMIZED", "WINDOW_MAXIMIZED", "WINDOW_HIDDEN", "WINDOW_FULL_SCREEN"];
        $(#state).value = states[view.state]; 
      }

      event click $(#full-screen)  { view.state = View.WINDOW_FULL_SCREEN }
      event click $(#default)      { view.state = View.WINDOW_SHOWN }

      view << event move.demo { showEvent("move") }
           << event moving.demo { showEvent("moving") }
           << event size.demo { showEvent("size") }
           << event mediachange.demo { showEvent("mediachange") }
           << event activate.demo { showEvent("activate") }
           << event resolutionchange.demo { showEvent("resolutionchange") }
           << event statechange.demo { showEvent("statechange") };


      self.closed = function() {
        view >> ".demo"; // pull of (remove) all event handlers with .demo namespace
        //view.off(".demo"); - same as above
      } 
    
    </script>
  </head>
<body>
  <button #full-screen>Full screen</button> <button #default>Default</button> state: <output #state />
  <p>View events:</p>
  <div#list>
  </div>

</body>
</html>
